<template>
  <div class="createPost-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" size="small" placeholder="输入流程定义名称" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="">搜索</el-button>
      <el-button class="filter-item" size="small" type="defalut" icon="el-icon-close" @click="" plain>清空</el-button>
    </div>
    <div class="btngroup">
      <!-- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="newModel">新增</el-button>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-edit" @click="updaModels"
:disabled="multipleSelection.length !== 1">修改</el-button> -->
      <el-button class="filter-item" size="mini" icon="el-icon-delete" @click="deleteProcess"
        :disabled="multipleSelection.length == 0">删除</el-button>
    </div>
    <div class="task-items">
      <el-table :data="processList" stripe style="width: 100%;" size="small" v-loading="listLoading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="key" label="流程定义KEY" min-width="80" align="left">
        </el-table-column>
        <el-table-column prop="name" label="模型名称" min-width="180">
        </el-table-column>
        <el-table-column prop="deploymentId" label="部署ID" min-width="180">
        </el-table-column>
        <el-table-column prop="version" label="版本" min-width="50">
        </el-table-column>
        <el-table-column prop="resourceName" label="资源文件" min-width="150">
        </el-table-column>
        <el-table-column label="操作" min-width="130">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showProcessById(scope.row.deploymentId, '.png')">查看</el-button>
            <el-button type="text" size="small" @click="linkToExamples(scope.row)">实例</el-button>
            <el-button type="text" size="small" @click="deleteProcessAndFush(scope.row.deploymentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 流程图 -->
    <el-dialog title="模型流程图" :visible.sync="dialogModelView" width="80%">
      <div v-html="modelImage"></div>
  </el-dialog>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import {
    getModels,
    getProcess,
    setProcessSus,
    show,
    delProcess
  } from '@/api/workflow.js'
  import axios from 'axios'
  import Cookies from 'js-cookie'

  export default {
    name: 'processList',
    data() {
      return {
        processList: [],
        processKey: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
        },
        multipleSelection: [],
        dialogModelView: false,
        modelImage: '',
        previewObj: {}
      }
    },
    computed: {
      ...mapGetters([
          'department'
        ])
    },
    mounted() {
      this.getProcessList()
    },
    methods: {
      // 跳转到流程实例
      linkToExamples(row){
        this.$router.push({ path: '/processExamples'})
      },
      getProcessList() {
        // 获取模型列表
        getProcess(this.department).then(res => {
          this.processList = res.data.data,
            this.listLoading = false
        })
      },
      // 显示模型流程图
      showProcessById(id, type) {
        this.dialogModelView = true
        show(id, type).then(res => {
          this.modelImage = res.data
        })
      },

      deleteProcess() {
        this.$confirm('此操作将删除模型, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.multipleSelection.forEach(item => {
            this.deleteProcessById(item.deploymentId)
          })
          this.getProcessList()
        })
      },

      deleteProcessAndFush(id) {
        this.deleteProcessById(id),
          this.getProcessList()
      },

      // 删除流程
      deleteProcessById(id) {
        delProcess(id).then(res => {
          this.$message({
            message: '删除流程成功！',
            type: 'success'
          });
        })
      },

      // 激活或挂起流程
      setProcessStatusById(id, status) {
        setProcessSus(id, status).then(res => {
          this.$message({
            message: '操作成功！',
            type: 'sucess'
          });
        })
      },

      // 表格多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleFilter() {

      },
      newModel() {
        createModel().then(res => {
          window.open(`${process.env.VUE_APP_WORKFLOW_URL}` + res.data.redirectUrl, '_slfe')
        })
      }
    }
  }

</script>
<style lang="scss">
  .createPost-container {
    padding: 20px;

    .btngroup {
      margin-top: 16px;
    }

    .task-items {
      margin-top: 20px;
    }
    .el-dialog__body{
      padding-top: 0;
    }
  }

</style>
